<template>
  <div class="container" :style="style">
    <!-- ====================== 头像与v ========================= -->
    <div class="header">
      <slot name="head"></slot>
    </div>
    <VBig v-if="IsV" class="vbig"/>

    <!-- ========================= 名字与注册时间 ================== -->
    <div class="nameTimeContain">
      <span class="name">
        <slot style="padding: 0" name="name"></slot>
      </span>

      <span class="time">
        <slot name="time"></slot>
      </span>
    </div>

    <!-- ======================= 文章内容 ===================== -->
    <div class="artical">
      <slot name="artical"></slot>
    </div>
    <!-- ========================= 图片 ====================== -->
    <div class="picture">
      <slot name="picture"></slot>
    </div>

    <!-- ====================== 转赞评 =========================== -->
    <like-icon class="like"/>

    <span class="likeArtical">
      {{ likeArtical }}
    </span>

    <CommentIcon class="comment"/>
    <span class="commentArtical">
      {{ commentArtical }}
    </span>


    <ShareIcon class="share"/>
    <span class="shareArtical">
      {{ shareArtical }}
    </span>

  </div>
</template>
<script>
import VBig from "../Icon/VBig";
// ---------------- 图标 --------------
import likeIcon from "../Icon/likeIcon";
import CommentIcon from "../Icon/CommentIcon";
import ShareIcon from "../Icon/ShareIcon";

export default {
  name: "Message",
  components: {
    VBig, likeIcon, CommentIcon, ShareIcon
  },
  data() {
    return {
      style: {
        height: this.height
      }
    }
  },
  props: {
    height: {
      type: String,
      default: "128px"
    },
    IsV: {
      type: Boolean,
      default: false
    },
    likeArtical: {
      type: String,
      default: "Like"
    },
    commentArtical: {
      type: String,
      default: "Comment"
    },
    shareArtical: {
      type: String,
      default: "Share"
    }
  }
}
</script>

<style scoped>
/*----------- 背景 ---------------*/
.container {
  width: 615px;
  background-color: rgba(31, 31, 31, 1);
}

/*----------- 头像 ---------------*/
.header {
  position: absolute;
  top: 20px;
  left: 20px;

  border-radius: 25px;
  overflow: hidden;
}

.vbig {
  position: absolute;
  top: 42px;
  left: 49px;
}

/*-------------- 名字与注册时间 -------------------*/
.nameTimeContain {
  position: absolute;
  left: 86px;
  top: 20px;

  width: 1000px;

  float: right;
}

.name {
  width: 247px;
  height: 24px;
  padding: 0;

  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */


  color: #FFFFFF;
}

.time {
  width: 247px;
  height: 16px;
  margin-left: 20px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;

  color: rgba(196, 196, 196, 1);
}

/*----------------- 文章内容 ------------------*/
.artical {
  position: absolute;
  left: 86px;
  top: 44px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* or 150% */


  /* Secondary/Dust */

  color: #C4C4C4;
}

.picture {
  position: absolute;
  left: 85px;
  top: 134px;

  border-radius: 8px;
}
/*----------- 转赞评 ------------*/
.like {
  position: absolute;
  right: 506px;
  bottom: 20px;
  height: 20px;
  width: 20px;
}

.comment {
  position: absolute;
  right: 325.67px;
  bottom: 20px;
  height: 20px;
  width: 20px;
}

.share {
  position: absolute;
  right: 143.55px;
  bottom: 20px;
  height: 20px;
  width: 20px;
}

.likeArtical{
  position: absolute;
  left: 114px;
  bottom: 22px;
  width: 22px;
  height: 16px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */

  display: flex;
  align-items: center;

  /* Secondary/Dust */

  color: #C4C4C4;


  /* Inside Auto Layout */

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0 5px;
}
.commentArtical{

  position: absolute;
  left: 296px;
  bottom: 22px;
  width: 22px;
  height: 16px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */

  display: flex;
  align-items: center;

  /* Secondary/Dust */

  color: #C4C4C4;


  /* Inside Auto Layout */

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0 5px;
}
.shareArtical{

  position: absolute;
  left: 478px;
  bottom: 22px;
  width: 22px;
  height: 16px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */

  display: flex;
  align-items: center;

  /* Secondary/Dust */

  color: #C4C4C4;


  /* Inside Auto Layout */

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 5px;
}
</style>